<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        html, body, ul, li {padding: 0; margin:0;}
        ul, li {list-style: none}
        .log {font-family: Consolas, monospace; font-size: 16px; color: #363636}
        .field {font-weight: bold;}
        .dir {display:inline-block; width: 70px;text-align: right}
        .request {color: royalblue}
        .response {color: darkgoldenrod}
        .error {color: crimson}
        #root-pane {padding:5px;}
    </style>
</head>
<body>
<ul id="root-pane"></ul>
<script>
    var root = document.getElementById ('root-pane'), node, max_rows = 1000;
    function appendLog (timestamp, type, dir, msg) {
        while (root.children.length >= max_rows) {
            root.removeChild (root.firstChild);
        }

        node = document.createElement ('li');
        node.className = 'log ' + type;
        node.innerHTML = '[<span class="field">' + timestamp + '</span>][<span class="dir field">' + dir + '</span>] ' + msg;
        root.appendChild (node);
        window.scrollTo (0, root.scrollHeight);
    }

    function clearLog () {
        root.innerHTML = '';
    }

    function setMaxRow (rows) {
        max_rows = rows;
        while (root.children.length >= max_rows) {
            root.removeChild (root.firstChild);
        }
    }
</script>
</body>
</html>